<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Loansurpluses' }">贷超管理</el-breadcrumb-item>
			<el-breadcrumb-item>平台数据</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-button type="primary" @click="download">导出表格</el-button>
			
			<el-divider></el-divider>
			
			<el-row :gutter="40">
				<el-col class="top-item" :span="4">
					<p>平台名称</p>
					<el-tag>{{baseJson.name}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>累计PV</p>
					<el-tag type="success">{{baseJson.totalPV}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>累计UV</p>
					<el-tag type="warning">{{baseJson.totalUV}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>累计IP</p>
					<el-tag type="danger">{{baseJson.totalIP}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>今日PV</p>
					<el-tag type="success">{{baseJson.currentPvCount}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>今日UV</p>
					<el-tag type="warning">{{baseJson.currentUvCount}}</el-tag>
				</el-col>
				<el-col class="top-item" :span="3">
					<p>今日IP</p>
					<el-tag type="danger">{{baseJson.currentIpCount}}</el-tag>
				</el-col>
			</el-row>
			
			<el-divider></el-divider>
			
			<div class="table-wapper">
				<p>昨日访客</p>
				<el-row :gutter="40">
					<el-col class="top-item" :span="4">
						<p>浏览量(PV)</p>
						<el-tag type="success">{{yesterdayJson.pvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>访客数(UV)</p>
						<el-tag type="warning">{{yesterdayJson.uvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>IP数</p>
						<el-tag type="danger">{{yesterdayJson.ipCount}}</el-tag>
					</el-col>
				</el-row>
				<div class="echarts-wapper">
					<el-select v-model="yesterdayValue" @change="yesterdayChange" placeholder="请选择">
					    <el-option label="PV" value="0"></el-option>
						<el-option label="UV" value="1"></el-option>
						<el-option label="IP" value="2"></el-option>
					</el-select>
					<div class="echarts-main" id="yesterday"></div>
				</div>
				
			</div>
			
			<el-divider></el-divider>
			
			<div class="table-wapper">
				<p>近7天访客</p>
				<el-row :gutter="40">
					<el-col class="top-item" :span="4">
						<p>浏览量(PV)</p>
						<el-tag type="success">{{sevenJson.pvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>访客数(UV)</p>
						<el-tag type="warning">{{sevenJson.uvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>IP数</p>
						<el-tag type="danger">{{sevenJson.ipCount}}</el-tag>
					</el-col>
				</el-row>
				<div class="echarts-wapper">
					<el-select v-model="sevendayValue" @change="sevendayChange" placeholder="请选择">
					    <el-option label="PV" value="0"></el-option>
						<el-option label="UV" value="1"></el-option>
						<el-option label="IP" value="2"></el-option>
					</el-select>
					
					<div class="echarts-main" id="seven"></div>
				</div>
				
			</div>
			
			<el-divider></el-divider>
			
			<div class="table-wapper">
				<p>近30天访客</p>
				<el-row :gutter="40">
					<el-col class="top-item" :span="4">
						<p>浏览量(PV)</p>
						<el-tag type="success">{{thirtyJson.pvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>访客数(UV)</p>
						<el-tag type="warning">{{thirtyJson.uvCount}}</el-tag>
					</el-col>
					<el-col class="top-item" :span="4">
						<p>IP数</p>
						<el-tag type="danger">{{thirtyJson.ipCount}}</el-tag>
					</el-col>
				</el-row>
				<div class="echarts-wapper">
					<el-select v-model="thirtydayValue" @change="thirtydayChange" placeholder="请选择">
					    <el-option label="PV" value="0"></el-option>
						<el-option label="UV" value="1"></el-option>
						<el-option label="IP" value="2"></el-option>
					</el-select>
					
					<div class="echarts-main" id="thirty"></div>
				</div>
				
			</div>
			
		</el-card>
	</div>
</template>

<script>
	var that 
	import echarts from 'echarts'
	export default{
		data(){
			return{
				thirtydayValue:'0',
				sevendayValue:'0',
				yesterdayValue:'0',
				baseJson:{
					name:'',
					totalPV:'',
					totalUV:'',
					currentPvCount:'',
					currentUvCount:''
				},
				yesterdayJson:{
					pvCount:'',
					uvCount:'',
					ipCount:'',
					pvArray:[],
					uvArray:[],
					ipArray:[],
					dayTime:[]
				},
				sevenJson:{
					pvCount:'',
					uvCount:'',
					ipCount:'',
					pvArray:[],
					uvArray:[],
					ipArray:[],
					dayTime:[]
				},
				thirtyJson:{
					pvCount:'',
					uvCount:'',
					ipCount:'',
					pvArray:[],
					uvArray:[],
					ipArray:[],
					dayTime:[]
				}
			}
		},
		created() {
			that = this
			this.getInfo()
		},
		mounted() {
			
		},
		methods:{
			download(){
				window.location.href = 'https://jindi.admin.qbclub.club/xnzAdminWeb/loanMarket/download?id='+this.$route.query.id
			},
			async getInfo(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				var id = this.$route.query.id
				const {data:res} = await this.$http.post('/loanMarket/loanMarkeDetails',{id:id})
				console.log(res)
				setTimeout(() => {
				  loading.close();
				}, 500);
				this.baseJson = res.data.baseJson
				this.yesterdayJson = res.data.yesterdayJson
				this.sevenJson = res.data.sevenJson
				this.thirtyJson = res.data.thirtyJson
				var yesterdayPvMax = this.getMax(that.yesterdayJson.pvArray)
				var sevendayPvMax = this.getMax(that.sevenJson.pvArray)
				var thirtydayPvMax = this.getMax(that.thirtyJson.pvArray)
				
				this.showLine('yesterday',that.yesterdayJson.dayTime,that.yesterdayJson.pvArray,yesterdayPvMax)
				this.showLine('seven',that.sevenJson.dayTime,that.sevenJson.pvArray,sevendayPvMax)
				this.showLine('thirty',that.thirtyJson.dayTime,that.thirtyJson.pvArray,thirtydayPvMax)
			},
			getMax(maxArry){
				var max = Math.max.apply(null,maxArry)
				var maxInt = max+5-max%5
				return maxInt
			},
			showLine(id,dayTime,vArray,lineMax){
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById(id));
				// 指定图表的配置项和数据
				var yesterdayOption = {
					color:['#a4bbfa'],
					tooltip: {},
					legend: {
						data:['浏览量']
					},
					xAxis: {
						data: dayTime,
						// type: 'category',
						boundaryGap: false
					},
					yAxis: {
						splitNumber:5,
						min:0,
						max:lineMax,
					},
					tooltip: {
						trigger: 'axis'
					},
					series: [{
						name: '浏览量',
						type: 'line',
						data: vArray,
						areaStyle: {},
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
					}],
					
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(yesterdayOption);
			},
			async yesterdayChange(){
				if(this.yesterdayValue==0){
					var yesterdayPvMax = this.getMax(that.yesterdayJson.pvArray)
					this.showLine('yesterday',that.yesterdayJson.dayTime,that.yesterdayJson.pvArray,yesterdayPvMax)
				}else if(this.yesterdayValue==1){
					var yesterdayUvMax = this.getMax(that.yesterdayJson.uvArray)
					this.showLine('yesterday',that.yesterdayJson.dayTime,that.yesterdayJson.uvArray,yesterdayUvMax)
				}else{
					var yesterdayIpMax = this.getMax(that.yesterdayJson.ipArray)
					this.showLine('yesterday',that.yesterdayJson.dayTime,that.yesterdayJson.ipArray,yesterdayIpMax)
				}
			},
			async sevendayChange(){
				if(this.sevendayValue==0){
					var sevendayPvMax = this.getMax(that.sevenJson.pvArray)
					this.showLine('seven',that.sevenJson.dayTime,that.sevenJson.pvArray,sevendayPvMax)
				}else if(this.sevendayValue==1){
					var sevendayUvMax = this.getMax(that.sevenJson.uvArray)
					this.showLine('seven',that.sevenJson.dayTime,that.sevenJson.uvArray,sevendayUvMax)
				}else{
					var sevendayIpMax = this.getMax(that.sevenJson.ipArray)
					this.showLine('seven',that.sevenJson.dayTime,that.sevenJson.ipArray,sevendayIpMax)
				}
			},
			thirtydayChange(){
				if(this.thirtydayValue==0){
					var thirtydayPvMax = this.getMax(that.thirtyJson.pvArray)
					this.showLine('thirty',that.thirtyJson.dayTime,that.thirtyJson.pvArray,thirtydayPvMax)
				}else if(this.thirtydayValue==1){
					var thirtydayUvMax = this.getMax(that.thirtyJson.uvArray)
					this.showLine('thirty',that.thirtyJson.dayTime,that.thirtyJson.uvArray,thirtydayUvMax)
				}else{
					var thirtydayIpMax = this.getMax(that.thirtyJson.ipArray)
					this.showLine('thirty',that.thirtyJson.dayTime,that.thirtyJson.ipArray,thirtydayIpMax)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.top-item{
		text-align: left;
		p{
			font-size: 14px;
			color: #4D4D4D;
			margin-bottom: 10px;
			margin-top: 0;
		}
		.el-tag{
			font-size: 20px;
		}
	}
	
	.echarts-wapper{
		margin-top: 30px;
	}
	
	.echarts-main{
		width: 100%;
		height: 400px;
	}
</style>
